<template>
    <div>
        <div class="page-title">设备管理</div>
        <router-link to="/addOffice">
            <el-button class="m-t-15" type="primary" size="small" icon="el-icon-edit">添加设备</el-button>
        </router-link>
        <a :href="play_url" target="_blank">
            <el-button class="m-t-15" type="primary" size="small" icon="el-icon-edit" style="margin-left:20px">播放地址</el-button>
        </a>
        
        <el-table :data="tableData" class="m-t-5">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="id" width="100"></el-table-column>
            <el-table-column prop="name" label="设备名称" width="100"></el-table-column>
            <el-table-column prop="serial" label="序列号" width="100"></el-table-column>
            <el-table-column prop="code" label="验证码" width="100"></el-table-column>
            <el-table-column prop="status" label="显示状态" width="150">
                <template #default="v">
                    <el-switch v-model="v.row.status" active-color="#f8c15c" :active-value="1" :inactive-value="0"
                        @change="changeStatus(v.$index, v.row)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" min-width="200">
                <template #default="v">
                    <el-button type="success" size="mini" icon="el-icon-edit" @click="handleEdit(v.$index, v.row)">编辑
                    </el-button>
                    <!-- <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(v.$index, v.row)">删除
                    </el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background hide-on-single-page layout="prev, pager, next" :total="total" :current-page="current"
            @current-change="changePage">
        </el-pagination>
    </div>
</template>

<script>
    import {
        get,
        del,
        put
    } from '@/network/request'

    export default {
        name: 'Office',
        data() {
            return {
                tableData: [],
                total: 0,
                current: 1,
                play_url:''
            }
        },
        mounted() {
            this.$nextTick(() => {
                // 获取信息
                get('/office', {
                    cid: sessionStorage.getItem('cid')
                }).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.tableData = result.data.data
                        this.total = result.data.total
                        this.current = result.data.current
                        this.play_url=result.data.play
                    }
                }).catch()
            })
        },
        methods: {
            // 编辑
            handleEdit(index, row) {
                this.$router.push('/editOffice/' + row.id)
            },
            // 删除
            handleDelete(index, row) {
                this.$confirm('此操作将永久删除，是否继续？', '系统提示', {
                    type: 'warning',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    del('/deleteOffice', {
                        'id': row.id
                    }).then(res => {
                        const result = res.data
                        if (result.code == 200) {
                            this.tableData.splice(index, 1)
                            this.$message.success({
                                message: '删除成功！',
                                offset: 70
                            })
                        } else {
                            this.$message.error({
                                message: '删除失败！',
                                offset: 70
                            })
                        }
                    }).catch()
                }).catch(() => {
                    this.$message.info({
                        message: '已取消删除！',
                        offset: 70
                    })
                })
            },
            // 分页
            changePage(page) {
                get('/office', {
                    page,
                    cid: sessionStorage.getItem('cid')
                }).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.tableData = result.data.data
                        this.total = result.data.total
                        this.current = result.data.current
                    }
                }).catch()
            },
            // 切换状态
            changeStatus(index, row) {
                if (index == -1) return false
                put('/switchOffice', {
                    id: row.id,
                    status: row.status
                }).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.$notify.success({
                            title: '系统提示',
                            message: '状态修改成功',
                            offset: 70
                        })
                    }
                }).catch()
            }
        }
    }
</script>

<style>
</style>